import { defineComponent } from "vue";

export default defineComponent({
  name: "DouBanItem",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  setup(props) {
    const { data } = props;
    let doubanInfos = [
      [
        {
          title: "导演：",
          key: "directors",
        },
        {
          title: "编剧：",
          key: "writer",
        },
        {
          title: "语言：",
          key: "language",
        },
        {
          title: "地区：",
          key: "location",
        },
        {
          title: "开播时间：",
          key: "pub_time",
        },
        {
          title: "类型：",
          key: "types",
        },
        {
          title: "好于：",
          key: "more_than",
        },
        {
          title: "演员：",
          key: "actors",
        },
      ],
      [
        {
          title: "评论数：",
          key: "rate_count",
        },
        {
          title: "5星：",
          isProgress: true,
          key: "recommend_degree5",
        },
        {
          title: "4星：",
          isProgress: true,
          key: "recommend_degree4",
        },
        {
          title: "3星：",
          isProgress: true,
          key: "recommend_degree3",
        },
        {
          title: "2星：",
          isProgress: true,
          key: "recommend_degree2",
        },
        {
          title: "1星：",
          isProgress: true,
          key: "recommend_degree1",
        },
      ],
    ];
    return () => {
      return (
        <a-card hoverable bordered style="hegiht:100%;">
          <div class="douban-item">
            <div class="left-con">
              <img alt="example" src={data.cover} />
            </div>
            <div class="right-con">
              <div class="title">{data.title}</div>
              <div class="infos">
                {doubanInfos.map((infos) => {
                  return (
                    <div class="info-group">
                      {infos.map((info) => {
                        if (data[info.key]) {
                          if (info.isProgress) {
                            return (
                              <div class="info-item">
                                <span>{info.title}</span>
                                <a-progress
                                  percent={data[info.key]}
                                  size="small"
                                  style="width:calc(100% - 5rem)"
                                />
                              </div>
                            );
                          } else {
                            return (
                              <div class="info-item">
                                <span style="font-weight:bold">
                                  {info.title}
                                </span>
                                {data[info.key]}
                              </div>
                            );
                          }
                        }
                      })}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </a-card>
      );
    };
  },
});
